<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-900 to-slate-700 flex items-center justify-center p-4">
    <div class="max-w-4xl mx-auto text-center">
      <!-- Logo区域 -->
      <div class="flex justify-center items-center gap-8 mb-8">
        <a href="https://vite.dev" target="_blank" class="group">
          <img 
            :src="viteLogo" 
            class="logo h-24 p-6 transition-all duration-300 group-hover:scale-110" 
            alt="Vite logo" 
          />
        </a>
        <a href="https://vuejs.org/" target="_blank" class="group">
          <img 
            :src="vueLogo" 
            class="logo h-24 p-6 transition-all duration-300 group-hover:scale-110" 
            alt="Vue logo" 
          />
        </a>
      </div>

      <!-- 标题 -->
      <h1 class="text-5xl font-bold text-white mb-4 bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
        Vue 3 + Tailwind CSS 4.1
      </h1>
      <p class="text-xl text-slate-300 mb-8">现代化的前端开发体验</p>

      <!-- 计数器卡片 -->
      <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-8 mb-8 border border-white/20">
        <h2 class="text-2xl font-semibold text-white mb-4">Vue 3 响应式计数器</h2>
        <div class="flex items-center justify-center gap-4 mb-4">
          <button 
            @click="decrement"
            class="bg-red-500 hover:bg-red-600 text-white w-12 h-12 rounded-full 
                   transition-all duration-300 transform hover:scale-105 
                   focus:outline-none focus:ring-4 focus:ring-red-300/50"
          >
            -
          </button>
          
          <div class="text-4xl font-bold text-white min-w-[100px]">
            {{ count }}
          </div>
          
          <button 
            @click="increment"
            class="bg-green-500 hover:bg-green-600 text-white w-12 h-12 rounded-full 
                   transition-all duration-300 transform hover:scale-105 
                   focus:outline-none focus:ring-4 focus:ring-green-300/50"
          >
            +
          </button>
        </div>
        
        <button 
          @click="reset"
          class="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700
                 text-white font-semibold py-3 px-8 rounded-lg transition-all duration-300
                 transform hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-blue-300/50"
        >
          重置计数器
        </button>
      </div>

      <!-- 功能展示区域 -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div 
          v-for="feature in features" 
          :key="feature.title"
          class="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10 
                 transition-all duration-300 hover:bg-white/10 hover:scale-105"
        >
          <div class="text-3xl mb-3">{{ feature.icon }}</div>
          <h3 class="text-lg font-semibold text-white mb-2">{{ feature.title }}</h3>
          <p class="text-slate-300 text-sm">{{ feature.description }}</p>
        </div>
      </div>

      <!-- 状态展示 -->
      <div class="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10 mb-8">
        <h3 class="text-lg font-semibold text-white mb-4">Vue 3 响应式状态</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
          <div class="text-slate-300">
            <span class="text-blue-400">计数值:</span> {{ count }}
          </div>
          <div class="text-slate-300">
            <span class="text-green-400">是否为偶数:</span> {{ isEven ? '是' : '否' }}
          </div>
          <div class="text-slate-300">
            <span class="text-purple-400">计数平方:</span> {{ countSquared }}
          </div>
        </div>
      </div>

      <p class="text-slate-400 text-sm">
        点击上方的 Vite 和 Vue 图标了解更多
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import viteLogo from '/vite.svg'
import vueLogo from '../assets/vue.svg'

// 响应式数据
const count = ref(0)

// 计算属性
const isEven = computed(() => count.value % 2 === 0)
const countSquared = computed(() => count.value * count.value)

// 方法
const increment = () => {
  count.value++
}

const decrement = () => {
  count.value--
}

const reset = () => {
  count.value = 0
}

// 功能特性数据
const features = [
  {
    icon: '🎨',
    title: '现代设计',
    description: '使用 Tailwind CSS 4.1 的最新功能'
  },
  {
    icon: '⚡',
    title: 'Vue 3 组合式 API',
    description: '更好的逻辑复用和类型推导'
  },
  {
    icon: '🔧',
    title: '类型安全',
    description: 'TypeScript 提供完整的类型支持'
  }
]
</script>

<style scoped>
.logo {
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
</style>
